<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="车票申请单" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>
        <FlowInfoCard  :id="form.id+''" :billType="form.billType" :flowInsId="form.flowInsId">
            <!-- 添加或修改员工入职对话框 -->
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-card class="top15">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="出发地" prop="departure">
                                <el-input v-model="form.departure" placeholder="请输入出发地"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="目的地" prop="destination">
                                <el-input v-model="form.destination" placeholder="请输入目的地"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="启程时间" prop="goTime">
                                <el-date-picker clearable v-model="form.goTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择启程时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="车次/架次" prop="carNum">
                                <el-input v-model="form.carNum" placeholder="请输入车次/架次"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="真实姓名" prop="applyRealname">
                                <el-input v-model="form.applyRealname" placeholder="请输入真实姓名"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="身份证号" prop="idNum">
                                <el-input v-model="form.idNum" placeholder="请输入身份证号"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="预计金额" prop="totalAmt">
                                <el-input v-model="form.totalAmt" placeholder="请输入预计金额"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>

                </el-card>
            </el-form>
        </FlowInfoCard>
    </div>
</template>

<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {addTicketApply, getTicketApply, updateTicketApply} from "@/api/oa/ticketApply";
import FormTopBar from "@/views/workflow/common/formTopBar"
import FlowInfoCard from "@/views/workflow/common/flowinfoCard";
export default {
    name: "TicketApplyForm",
    components:{FlowInfo,FormTopBar,FlowInfoCard},
    data() {
        return {
            // 表单参数
            form: {
            },
            showFlowInfo:false,
            taskId:'',
            // billType:'',
            readonly:false,
            // 表单校验
            rules: {
                applyTitle: [
                    {required: true, message: "申请标题不能为空", trigger: "blur"}
                ],
                destination: [
                    {required: true, message: "目的地不能为空", trigger: "blur"}
                ],
                departure: [
                    {required: true, message: "出发地不能为空", trigger: "blur"}
                ],
                totalAmt: [
                    {required: true, message: "预计金额不能为空", trigger: "blur"}
                ],
                goTime: [
                    {required: true, message: "启程时间不能为空", trigger: "blur"}
                ],
                carNum: [
                    {required: true, message: "车次/架次不能为空", trigger: "blur"}
                ],
                applyRealname: [
                    {required: true, message: "真实姓名不能为空", trigger: "blur"}
                ],
                idNum: [
                    {required: true, message: "身份证号不能为空", trigger: "blur"}
                ]
            },
            showCommitDialog:false,
            commitType:"",
        };
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);

        }
    },
    mounted() {
    },
    methods: {
        //  获取单据信息
        getDetailData(id) {
            getTicketApply(id).then(response => {
                this.form = response.data;
            });
        },
        /** 提交按钮 */
        submitForm() {
            console.log(this.form.timeRange)
            if(this.form.timeRange && this.form.timeRange.length>0){
                this.form.startTime = this.form.timeRange[0];
                this.form.endTime = this.form.timeRange[1];
            }

            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateTicketApply(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addTicketApply(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/commonApply/ticketApply",query: {billType:this.form.billType}});
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }
};
</script>
